<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.min.js"></script>
  </head>
  <body>
    <div class="root">
      <div class="div1">
        <div class="div1_1"></div>
        <div class="div1_2 active"></div>
        <div class="div1_3 active"></div>
      </div>
    </div>

    <script>
      $(function () {
        const $div1 = $('.div1')
        // parent
        console.log('$div1.parent():', $div1.parent())
        console.log("$div1.parent('body'):", $div1.parent('body'))

        // parents 获取所有匹配的的父级节点（包括祖先）
        console.log("$('.div1_2').parents():", $('.div1_2').parents())
        console.log("$('.div1_2').parents('body'):", $('.div1_2').parents('body'))

        // children 找亲儿子们
        console.log("$('.root').children():", $('.root').children())
        console.log("$('.div1').children():", $('.div1').children())
        console.log("$('.div1').children('.active'):", $('.div1').children('.active'))

        // find 根据条件找后代
        console.log("$('.root').find():", $('.root').find()) // 如果不指定，那么一个都找不到
        console.log("$('.root').find('div'):", $('.root').find('div'))
        console.log("$('.root').find('div.active'):", $('.root').find('div.active'))
      })
    </script>
  </body>
</html>
